<template>
  <div class="watch2">
    <h1>情况二：使用watch监视的ref定义的对象类型的变化</h1>
    <h2>姓名：{{ person.name }}</h2>
    <h2>年龄：{{ person.age }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changePerson">修改整个人</button>
  </div>
</template>
<script lang="ts" setup>
import { watch, ref } from "vue";
// 数据
let person = ref({ name: "张三", age: 18 });
// 方法
function changeName() {
  person.value.name += "~";
}
function changeAge() {
  person.value.age += 1;
}
function changePerson() {
  person.value = { name: "李四", age: 90 };
}
// 监听
// 情况二：监听ref定义的对象数据类型，监视的是对象的地址值，若想监听对象内部属性的变化，需要手动开启深度监听
// watch的第一个参数是被监听的对象
// watch的第二个参数是监听的回调
// watch的第三个参数是配置对象,deep,immediate等...
watch(person,(newValue, oldValue) => {
    console.log("person变化了", newValue, oldValue);
  },{ deep: true }
);
</script>
<style scoped>
.watch2 {
  width: 80vw;
  height: 80vh;
  border: 1px solid red;
}
</style>